﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<title>三3三博客社区</title>
	<link rel="icon" href="../../images/icon.jpg" sizes="32x32">
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="iconfont.css" rel="stylesheet" type="text/css" />
<link href="test.css" rel="stylesheet" type="text/css" />

<style>
.hasBeenAnswer {
	background: #5d9cec;
	color:#fff;
}

</style>
</head>

<body>
	<div class="main">
		<!--nr start-->
		<div class="test_main">
			<div class="nr_left">
				<div class="test">
					<form action="" method="post">
<!--						<div class="test_title">-->
<!--							<p class="test_time">-->
<!--								<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>-->
<!--							</p>-->
<!--							<font><input type="button" name="test_jiaojuan" value="交卷"></font>-->
<!--						</div>-->
						
							<div class="test_content">
								<div class="test_content_title">
									<h2>单选题</h2>
									<p>
										<span>共</span><i class="content_lit">50</i><span>题</span>
									</p>
<!--A1,A3,B1,A2,B2,C1,C2,C3,D,E,F-->
									<select id="type" style="width: 80px">
										<option value ="A1">A1</option>
										<option value ="A2">A2</option>
										<option value ="A3">A3</option>
										<option value="B1">B1</option>
										<option value="B2">B2</option>
										<option value="C1" selected>C1</option>
										<option value="C2">C2</option>
										<option value="C3">C3</option>
										<option value="D">D</option>
										<option value="E">E</option>
										<option value="F">F</option>
									</select>
									<select id="subject">
										<option value ="1">科目一</option>
										<option value ="4">科目四</option>
									</select>
									<button type="button" onclick="editorType()" style="width: 60px;">确认</button>
								</div>
							</div>
							<div class="test_content_nr">
								<ul>

										<li id="qu_0_0">
<!--											<div class="test_content_nr_tt">-->
<!--												<i>1</i><span>(1分)</span><font>在生产管理信息系统中，下列操作步骤能正确将工单推进流程的是（  ）</font><b class="icon iconfont">&#xe881;</b>-->
<!--											</div>-->

											<div class="test_content_nr_main">
												<ul id="suject">

												</ul>
											</div>
										</li>
									
								</ul>
							</div>
						

							<div class="test_content_nr">
								</ul>
							</div>
						
					</form>
				</div>

			</div>
			<div class="nr_right">
				<div class="nr_rt_main">
					<div class="rt_nr1">
						<div class="rt_nr1_title">
							<h1>
								<i class="icon iconfont">&#xe692;</i>答题卡
							</h1>
<!--							<p class="test_time">-->
<!--								<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>-->
<!--							</p>-->
						</div>
						
							<div class="rt_content">
								<div class="rt_content_tt">
									<h2>单选题</h2>
									<p>
										<span>共</span><i class="content_lit">60</i><span>题</span>
									</p>
								</div>
								<div class="rt_content_nr answerSheet">
									<ul>
											<li><a href="#qu_0_0">1</a></li>
										
											<li><a href="#qu_0_1">2</a></li>
										
											<li><a href="#qu_0_2">3</a></li>
										
											<li><a href="#qu_0_3">4</a></li>
										
											<li><a href="#qu_0_4">5</a></li>
										
											<li><a href="#qu_0_5">6</a></li>
										
											<li><a href="#qu_0_6">7</a></li>
										
											<li><a href="#qu_0_7">8</a></li>
										
											<li><a href="#qu_0_8">9</a></li>
										
											<li><a href="#qu_0_9">10</a></li>
										
											<li><a href="#qu_0_10">11</a></li>
										
											<li><a href="#qu_0_11">12</a></li>
										
											<li><a href="#qu_0_12">13</a></li>
										
											<li><a href="#qu_0_13">14</a></li>
										
											<li><a href="#qu_0_14">15</a></li>
										
											<li><a href="#qu_0_15">16</a></li>
										
											<li><a href="#qu_0_16">17</a></li>
										
											<li><a href="#qu_0_17">18</a></li>
										
											<li><a href="#qu_0_18">19</a></li>
										
											<li><a href="#qu_0_19">20</a></li>
										
											<li><a href="#qu_0_20">21</a></li>
										
											<li><a href="#qu_0_21">22</a></li>
										
											<li><a href="#qu_0_22">23</a></li>
										
											<li><a href="#qu_0_23">24</a></li>
										
											<li><a href="#qu_0_24">25</a></li>
										
											<li><a href="#qu_0_25">26</a></li>
										
											<li><a href="#qu_0_26">27</a></li>
										
											<li><a href="#qu_0_27">28</a></li>
										
											<li><a href="#qu_0_28">29</a></li>
										
											<li><a href="#qu_0_29">30</a></li>
										
											<li><a href="#qu_0_30">31</a></li>
										
											<li><a href="#qu_0_31">32</a></li>
										
											<li><a href="#qu_0_32">33</a></li>
										
											<li><a href="#qu_0_33">34</a></li>
										
											<li><a href="#qu_0_34">35</a></li>
										
											<li><a href="#qu_0_35">36</a></li>
										
											<li><a href="#qu_0_36">37</a></li>
										
											<li><a href="#qu_0_37">38</a></li>
										
											<li><a href="#qu_0_38">39</a></li>
										
											<li><a href="#qu_0_39">40</a></li>
										
											<li><a href="#qu_0_40">41</a></li>
										
											<li><a href="#qu_0_41">42</a></li>
										
											<li><a href="#qu_0_42">43</a></li>
										
											<li><a href="#qu_0_43">44</a></li>
										
											<li><a href="#qu_0_44">45</a></li>
										
											<li><a href="#qu_0_45">46</a></li>
										
											<li><a href="#qu_0_46">47</a></li>
										
											<li><a href="#qu_0_47">48</a></li>
										
											<li><a href="#qu_0_48">49</a></li>
										
											<li><a href="#qu_0_49">50</a></li>
										
									</ul>
								</div>
							</div>
					</div>

				</div>
			</div>
		</div>
		<!--nr end-->
		<div class="foot"></div>
	</div>

	<script src="jquery-1.11.3.min.js"></script>
	<script src="jquery.easy-pie-chart.js"></script>
	<!--时间js-->
	<script src="time/jquery.countdown.js"></script>
	<script>
		var type = "c1";
		var subject = "1";
		var pagenum = 1;
		window.jQuery(function($) {
			"use strict";
			
			$('time').countDown({
				with_separators : false
			});
			$('.alt-1').countDown({
				css_class : 'countdown-alt-1'
			});
			$('.alt-2').countDown({
				css_class : 'countdown-alt-2'
			});
			
		});
		
		$(function() {
			$('li.option label').click(function() {
			debugger;
				var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
				var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
				// 设置已答题
				if(!cardLi.hasClass('hasBeenAnswer')){
					cardLi.addClass('hasBeenAnswer');
				}
				
			});
			getSubData();
		});

		//获取考题数据
		function getSubData() {
			$("#suject").empty();
			var data2 = {type:type,subject:subject,pagenum:pagenum};
			$.getJSON("/news/getSub",data2,function (data) {
				if (data.data.length == 0 || data.data == null){
					alert("没有更多了。。。")
					return;
				}
				$.each(data.data, function (i,value) {
					$("#suject").append(
							'<li id="qu_0_'+i+'"><div class="test_content_nr_tt"><i>'+(i+1)+'</i><span>(1分)' +
							'<font>'+value.question+'</font></span></div><div class="test_content_nr_main"><ul id="suject">' +
							'<li class="option">' +
							'<label for="0_answer_1_option_1"><p>'+value.option1+'</p></label></li><li class="option">' +
							'<label for="0_answer_1_option_2"><p>'+value.option2+'</p></label></li><li class="option">' +
							'<label for="0_answer_1_option_3"><p>'+value.option3+'</p></label></li><li class="option">' +
							'<label for="0_answer_1_option_4"><p>'+value.option4+'</p></label></li><li class="option">' +
							'<label><p>正确答案：'+value.answer+'</p></label></li><li class="option">' +
							'<label><p>详解：'+value.explain+'</p></label></li></ul> </div>'
					)
				})
			})
		}

		//修改科目或驾照级别
		function editorType() {
			type = $("#type").val();
			subject = $("#subject").val();
			getSubData();
		}

		//换题
		function flushSubData(){
			pagenum = GetRandomNum(1, 200);
			getSubData();
		}

		//获取随机数
		function GetRandomNum(Min,Max)
		{
			var Range = Max - Min;
			var Rand = Math.random();
			return(Min + Math.round(Rand * Range));
		}
	</script>
<div style="text-align:center;">
<p><button onclick="flushSubData()" href="#" style="width: 300px;position: relative;left: -100px;top: -30px;background-color: #0dd2ef">点击换题</button></p>
</div>

</body>

</html>